<template>
  <div class="time_class_none">
    <el-select
      v-model="timelist"
      multiple
      filterable
      allow-create
      style="width: 400px"
      default-first-option
      placeholder="请选择"
      :multiple-limit="4"
      ref="select"
      @remove-tag="removeFun"
      value-key="item"
    >
      <div slot="empty" value="" style="height: 85px; padding: 0">
        <div class="time_flex">
          <div>
            <el-time-picker
              class="el_time_picker_zindex"
              is-range
              v-model="value1"
              :value="value1"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
              value-format="HH:mm:ss"
              format="HH:mm:ss"
              @change="istime"
              @focus="istime2"
              @blur="istime3"
            >
            </el-time-picker>
          </div>
          <div>
            <el-button class="btn" @click="yestime">确定</el-button>
          </div>
        </div>
      </div>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: ['09:00:00', '18:00:00'],
      timelist: [],
      list: [],
      crossConnection: [] //
    }
  },
  props: ['times', 'crossTime'],
  mounted() {},
  watch: {
    times: {
      handler(val) {
        if (val.length > 0) {
          this.fun()
        } else {
          this.list = []
          this.timelist = []
          this.crossConnection = []
        }
      }
    },
    crossTime: {
      handler(val) {
        if (val.length > 0) {
          this.crossConnection = []
          val.forEach(item => {
            let timecross = {
              startTime: item.start_time,
              endTime: item.end_time
            }
            this.crossConnection.push(timecross)
          })
        } else {
          this.crossConnection = []
        }
      }
    }
  },
  methods: {
    fun() {
      if (this.times.length > 0) {
        this.timelist = this.times
      }
    },
    istime(e) {
      this.$refs.select.focus()
    },
    istime2(e) {
      this.$refs.select.focus()
    },
    istime3(e) {
      this.$refs.select.focus()
    },
    isfou() {
      this.$refs.select.focus()
    },
    yestime() {
      if (this.value1[0] != '' && this.value1[1] != '') {
        if (this.value1[0] == this.value1[1]) {
          this.$message.warning('开始时间和结束时间不能相同，请重新选择！')
        } else {
          if (this.timelist.length == 4) {
            this.timelist.splice(0, 1)
            this.list.splice(0, 1)
          }
          this.crossConnection.push({
            startTime: this.value1[0],
            endTime: this.value1[1]
          })
          if (this.repeatTime(this.crossConnection)) {
            this.timelist.push(`${this.value1[0]}-${this.value1[1]}`)
            let tiemlist = {}
            tiemlist = {
              start_time: this.value1[0],
              end_time: this.value1[1]
            }
            this.list.push(tiemlist)
            this.value1 = ['', '']
            this.$emit('timeFun', this.list)
          } else {
            this.$message.warning('时间段有交叉，请重新选择！')
            this.crossConnection.pop()
          }
        }
      }
    },
    // 判断时间是否有交叉
    repeatTime(arr) {
      for (var k in arr) {
        if (!this.judege(k, arr)) {
          return false
        }
      }
      return true //true 不重复 false为重复
    },
    // 判断时间是否有交叉
    judege(index, arr) {
      for (var k in arr) {
        if (index !== k) {
          //判断交叉时间是从第一个对象对比除了本身之外的开始时间和结束时间，如果开始时间在对比对象的开始时间和结束时间之间，或者结束时间在对比对象的开始时间和结束时间之间则是交叉。
          if (
            arr[k].startTime <= arr[index].startTime &&
            arr[k].endTime >= arr[index].startTime
          ) {
            return false
          }
          if (
            arr[k].startTime <= arr[index].endTime &&
            arr[k].endTime >= arr[index].endTime
          ) {
            return false
          }
        }
      }
      return true
    },
    removeFun() {
      let dateTimeOne = []
      let timeTwo = []
      this.timelist.map((item, index) => {
        dateTimeOne.push(item.split('-'))
      })
      this.crossConnection = []
      dateTimeOne.map(item => {
        let b = { start_time: item[0], end_time: item[1] }
        this.crossConnection.push({
          startTime: item[0],
          endTime: item[1]
        })
        timeTwo.push(b)
      })
      this.list = timeTwo
      this.$emit('timeFun', timeTwo)
    }
  }
}
</script>

<style lang="scss" scoped>
.time_flex {
  height: 85px;
  width: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  > div:first-child {
    padding-top: 10px;
    height: 40px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
  }
  > div:last-child {
    text-align: right;
  }
  .btn {
    margin-right: 10px;
    margin-bottom: 5px;
    color: $textColorgreen;
  }
}
</style>
<style lang="scss">
.time_class_none {
  .el-select-dropdown__item .hover {
    padding: 0;
  }
}
</style>
